<script lang="ts" setup>
import Header from "@/components/Header.vue";
import {computed, inject, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch} from "vue";
import {MapBrowserEvent} from "ol";
import "ol/ol.css";
import {GeoJSON} from "ol/format";
import {Fill, Stroke, Style} from "ol/style";
import * as turf from '@turf/turf'
import {transform} from "ol/proj";
import Feature, {type FeatureLike} from "ol/Feature";
import {LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon,} from "ol/geom";
import {lineString} from "@turf/helpers";
import buffer from "@turf/buffer";
import {Vue3SeamlessScroll} from 'vue3-seamless-scroll';
import BrightModule from '@/views/BrightModule/index.vue';
import GoalModule from '@/views/GoalModule/index.vue';
import ScheduleModule from '@/views/ScheduleModule/index.vue';
import type {Coordinate} from "ol/coordinate";
import { DndProvider, useDrag, useDrop } from "vue3-dnd"

const mapCenter = ref([111.55581845295, 40.48582126024]);

const showImg = ref(false);

const onCloser = () => {
    // overlayLayer.setPosition(undefined)
    Object.assign(f, {
        Shape_Le_1: 0, //周长	米
        Shape_Ar_1: 0, //面积	平方米
        ZXMMC: '',		//项目名称
        SHENG: '', // 省份（例如：内蒙古自治区）
        SHI: '',   // 城市（例如：呼和浩特市）
        XIAN: '',  // 区县（例如：新城区）
        KSWZ: '',  // 项目详细地址
        HCDW: '',  // 主管单位名称
        HCRY: '',  // 录入人员姓名
        BZ_1: '', // 备注信息  内蒙古大青山国家级自然保护区
        xy: [],
    })
    // overlayRef.value.overlay.setPosition(undefined);
    showImg.value = false;
    selectedFeatures.value = [];
}

const wrap = ref(null)

const projection = ref("EPSG:4326");
const rotation = ref(0);
const zoom = ref(9);

const currentCenter = ref(mapCenter.value);
const currentZoom = ref(zoom.value);
const currentRotation = ref(rotation.value);
const currentResolution = ref(0);
function resolutionChanged(event) {
    currentResolution.value = event.target.getResolution();
    currentZoom.value = event.target.getZoom();
}
function centerChanged(event) {
    currentCenter.value = event.target.getCenter();
}
function rotationChanged(event) {
    currentRotation.value = event.target.getRotation();
}

const geoJson = new GeoJSON();

function styleFn1(feature) {
    return new Style({
        fill: new Fill({
            color: feature.get("COLOR_BIO") || "rgba(238,238,238,0.3)",
        }),
        stroke: new Stroke({
            color: "rgb(0,139,253)",
            lineCap: "butt"
        })
    });
}

function styleFn2(feature) {
    return new Style({
        fill: new Fill({
            color: feature.get("COLOR_BIO") || "#eeeeee",
        }),
    });
}

const urlXYZ = ref({
    amapXYZ: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    // amapXYZ: "http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
    dxtXYZ: "http://gis.nmgbigdata.com:1002/gisproxy/RasterServer/gdimg/{z}/{x}/{y}?tk=b5c4a562-f09c-11ee-a21f-0242ac110002",
    tdtXYZ: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=9a7d6bbcdd0722cf6d52e8acb4f1c136",

});

const sourceUrl = ref("/geojson/geo.json");
const sourceUrl3 = ref("https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=150100_full");


const mapRef = ref(null);
const mapView = ref(null);
const selectedFeatures = ref<FeatureLike[]>([]);
const highlightedFeatures = ref<FeatureLike[]>([]);
const bound = ref<FeatureLike>();
const bufferRadius = ref<number>(0.01);

const f = reactive({
    Shape_Le_1: 0, //周长	米
    Shape_Ar_1: 0, //面积	平方米
    ZXMMC: '',		//项目名称
    SHENG: '', // 省份（例如：内蒙古自治区）
    SHI: '',   // 城市（例如：呼和浩特市）
    XIAN: '',  // 区县（例如：新城区）
    KSWZ: '',  // 项目详细地址
    HCDW: '',  // 主管单位名称
    HCRY: '',  // 录入人员姓名
    BZ_1: '', // 备注信息  内蒙古大青山国家级自然保护区
    xy: [],
})

/**
 * show hovered feature in separate layer
 */
function hoverFeature(event: MapBrowserEvent<PointerEvent>) {
    const map = mapRef.value?.map;
    if (!map) {
        return;
    }
    const features = map.getFeaturesAtPixel(event.pixel, {
        hitTolerance: 10,
        layerFilter,
    });
    highlightedFeatures.value = features[0] ? [features[0]] : [];
}
/**
 * select features and combine them when shift key is pressed
 */
function selectFeature(event: MapBrowserEvent<PointerEvent>) {
    const map = mapRef.value?.map;
    if (!map) {
        return;
    }

    // reset selection when shift key isn't pressed
    if (!event.originalEvent.shiftKey) {
        selectedFeatures.value = [];
    }

    // store selected feature
    const features = map.getFeaturesAtPixel(event.pixel, {
        hitTolerance: 5,
        layerFilter,
    });
    if (!features.length) {
        return;
    }
    const feature = features[0];
    console.log('----------点击得feature', feature)
    // 控制弹窗
    f.Shape_Le_1 = feature.get('Shape_Le')   // 周长 米
    f.Shape_Ar_1 = feature.get('Shape_Ar_1')   // 面积	平方米
    f.ZXMMC = feature.get('ZXMMC')   //项目名称
    f.SHENG = feature.get('SHENG')   // 省份（例如：内蒙古自治区）
    f.SHI = feature.get('SHI')   // 城市（例如：呼和浩特市）
    f.XIAN = feature.get('XIAN')   // 区县（例如：新城区）
    f.KSWZ = feature.get('KSWZ')   // 项目详细地址
    f.HCDW = feature.get('HCDW')   // 主管单位名称
    f.HCRY = feature.get('HCRY')   // 录入人员姓名
    f.BZ_1 = feature.get('BZ_1')   // 备注信息  内蒙古大青山国家级自然保护区
    f.xy = event.coordinate
    showImg.value = true;

    const featureIndex = selectedFeatures.value.indexOf(feature);
    if (featureIndex == -1) {
        selectedFeatures.value.push(feature);
    } else {
        selectedFeatures.value.splice(featureIndex, 1);
    }
}
/**
 * Only handle click / hover for the layer with class name "feature-layer"
 */
function layerFilter(layerCandidate) {
    return layerCandidate.getClassName().includes("feature-layer");
}

const highlightingTemplate = computed<Coordinate[]>(() => {
    // get flat coordinates from all selected geometries (e. g. [13.40, 52.52, 13.32, 51.43, ...])
    const allFlatCoordinates: Coordinate = [];
    selectedFeatures.value.forEach((feature) => {
        const geometry = feature.getGeometry() as
            | Point
            | MultiPoint
            | Polygon
            | MultiPolygon
            | LineString
            | MultiLineString;
        allFlatCoordinates.push(...geometry.getFlatCoordinates());
    });

    // map flat coordinates to Coordinate array (e. g. [[13.40, 52.52], [13.32, 51.43], [...]])
    return allFlatCoordinates
        .reduce<Coordinate[]>((accumulator, _, currentIndex, array) => {
            if (currentIndex % 2 === 0) {
                accumulator.push(array.slice(currentIndex, currentIndex + 2));
            }
            return accumulator;
        }, [])
        .map((c) => transform(c, "EPSG:3857", "EPSG:4326"));
});


watch([highlightingTemplate, bufferRadius], () => {
    if (highlightingTemplate.value.length === 0) {
        bound.value = undefined;
    } else {
        const line = lineString(highlightingTemplate.value);
        const bufferedHull = buffer(line, bufferRadius.value, {
            units: "meters",
            steps: 64
        });
        bound.value = new GeoJSON().readFeature(bufferedHull, {
            dataProjection: "EPSG:4326",
            featureProjection: "EPSG:3857",
        });
    }
});

const overlayRef = ref(null);

// 战略布局数据
const list = ref([
    {
        title: "《全国生态功能区划（修编版）》",
        date: Date.now(),
    },
    {
        title: "《内蒙古自治区主体功能区划》",
        date: Date.now(),
    },
    {
        title: "《全国重要生态系统保护和修复重大工程总体规划（2021—2035年）》",
        date: Date.now(),
    },
    {
        title: "《黄河重点生态区（含黄土高原生态屏障）生态保护和修复重大工程》",
        date: Date.now(),
    },
    {
        title: "《呼和浩特市“十四五”水安全保障规划》",
        date: Date.now(),
    },
    {
        title: "《内蒙古自治区呼和浩特市地质灾害防治规划（2021-2025 年）》",
        date: Date.now(),
    },
    {
        title: "《关于支持呼和浩特市高质量发展的意见》（内政发〔2023〕1号）",
        date: Date.now(),
    },
    {
        title: "《内蒙古自治区构筑我国北方重要生态安全屏障规划（2020－2035年）》",
        date: Date.now(),
    },
    {
        title: "《重点生态保护修复治理资金管理办法》",
        date: Date.now(),
    },
]);
const classOption = {
    stop: false, // 是否开启滚动
    hoverStop: true, // 鼠标停止
}

// 绩效目标
const goalList = ref([
    {
        name: '修复面积',
        total: 2745.86,
        percent: 0.1,
        unit: '公顷'
    },
    {
        name: '修复废弃矿山',
        total: 407,
        percent: 0.2,
        unit: '个'
    },
    {
        name: '隐患点消除',
        total: 290,
        percent: 0.3,
        unit: '个'
    },
    {
        name: '边坡治理面积',
        total: 655.94,
        percent: 0.4,
        unit: '公顷'
    },
    {
        name: '采坑治理面积',
        total: 983.91,
        percent: 0.5,
        unit: '公顷'
    },
    {
        name: '新增林地面积',
        total: 152.3,
        percent: 0.6,
        unit: '公顷'
    },
    {
        name: '新增草地面积',
        total: 761.51,
        percent: 0.7,
        unit: '公顷'
    },
    {
        name: '退化草地修复',
        total: 1739.3,
        percent: 0.8,
        unit: '公顷'
    },
]);

// onChange
const onChange = () => {
    console.log('onChange')
}

// 历史照片
const historyList = ref([
    {
        src: '',
        date: '2023-03-10'
    },
    {
        src: '',
        date: '2023-05-10'
    },
    {
        src: '',
        date: '2023-05-20'
    },
    {
        src: '',
        date: '2023-05-30'
    },
    {
        src: '',
        date: '2023-07-01'
    },
    {
        src: '',
        date: '2024-07-01'
    },
    {
        src: '',
        date: '2024-06-10'
    },
    {
        src: '',
        date: '2025-06-01'
    },
    {
        src: '',
        date: '2025-07-01'
    },
    {
        src: '',
        date: '2025-07-20'
    }
])

// 控制图表隐藏与显示
const showZhanlue = ref(true);
const showLiangdian = ref(true);
const showJixiao = ref(true);
const showJindu = ref(true);

// 搜索关键字
const originData = ref([]);
fetch('/geojson/geo.json')
    .then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok")
        }
        return response.json();
    })
    .then(data => {
        originData.value = data.features;
    }).catch(error => {
    console.error('Error fetching or parsing data:', error)
});
const searchKey = ref('');
const searchOptions = computed(() => {
    return originData.value.map(item => {
        return {
            label: item.properties.ZXMMC,
            value: item.properties.TBBH
        }
    }).filter(item => {
        return item.label.includes(searchKey.value)
    })
})
const onSelect = (value) => {
    console.log('onSelect', value)
    if (value) {
        const feature = originData.value.find(item => {
            return item.properties.TBBH === value
        })
        console.log('feature', feature)
        if (feature) {
            const featureCenter = turf.center(feature);
            console.log('featureCenter.geometry.coordinates', featureCenter.geometry.coordinates)
            console.log('mapRef.value', mapRef.value)
            console.log('mapRef.value。map', mapRef.value.map)
            mapRef.value.map.getView().setCenter(featureCenter.geometry.coordinates)
            open(feature)
        }
    }
}

const open = (feature) => {
    selectedFeatures.value = [];
    feature = new GeoJSON().readFeature(feature);
    // console.log('turf.center(feature)', turf.center(feature))
    // 控制弹窗
    f.Shape_Le_1 = feature.get('Shape_Le')   // 周长 米
    f.Shape_Ar_1 = feature.get('Shape_Ar_1')   // 面积	平方米
    f.ZXMMC = feature.get('ZXMMC')   //项目名称
    f.SHENG = feature.get('SHENG')   // 省份（例如：内蒙古自治区）
    f.SHI = feature.get('SHI')   // 城市（例如：呼和浩特市）
    f.XIAN = feature.get('XIAN')   // 区县（例如：新城区）
    f.KSWZ = feature.get('KSWZ')   // 项目详细地址
    f.HCDW = feature.get('HCDW')   // 主管单位名称
    f.HCRY = feature.get('HCRY')   // 录入人员姓名
    f.BZ_1 = feature.get('BZ_1')   // 备注信息  内蒙古大青山国家级自然保护区
    f.xy = feature.getGeometry().getCoordinates()[0][0];
    showImg.value = true;

    console.log('-------------搜索得feature', feature.getGeometry().getCoordinates()[0][0])

    const featureIndex = selectedFeatures.value.indexOf(feature);
    if (featureIndex == -1) {
        selectedFeatures.value.push(feature);
    } else {
        selectedFeatures.value.splice(featureIndex, 1);
    }
}

// 搜索条可以拖动
const x = ref(0);
const moveableElement = ref(null);
let initialX = 0;
let isDragging = false;
const handleMouseDown = (event) => {
    initialX = event.clientX - x.value;
    isDragging = true;
};
const handleMouseMove = (event) => {
    if (!isDragging) return;

    x.value = event.clientX - initialX;
};
const handleMouseUp = () => {
    isDragging = false;
};

onMounted(() => {
    moveableElement.value.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
});


onBeforeUnmount(() => {
    moveableElement.value && moveableElement.value.removeEventListener('mousedown', handleMouseDown);
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
});


</script>

<template>
    <div id="wrap" ref="wrap" class="bg-[#ffe14bff]">
        <!--        水印-->
        <n-watermark
            v-if="true"
            content="大家艰苦一下，一切都会有的"
            cross
            fullscreen
            :font-size="16"
            font-color="rgba(128, 128, 128, .3)"
            :line-height="16"
            :width="384"
            :height="384"
            :x-offset="12"
            :y-offset="60"
            :rotate="-15"
        />
        <Header />
        <!--        搜索框start    -->
        <div class="absolute w-100% h-140px top-300px  flex justify-center">
            <div ref="moveableElement" class="bg-blue pl-60px rounded-20px relative cursor-e-resize" :style="{ transform: `translateX(${x}px)` }">
                <n-auto-complete
                    v-model:value="searchKey"
                    :input-props="{
                      autocomplete: 'disabled'
                    }"
                    :options="searchOptions"
                    placeholder="输入项目名称进行搜索"
                    clearable
                    @select="onSelect"
                />
            </div>
        </div>
        <!--        搜索框end-->
        <!--        指标start-->
        <div class="absolute left-0 top-500px">
            <div v-show="!showZhanlue"
                 @click="showZhanlue=!showZhanlue"
                 class="bg-tit2 w-400px h-200px leading-220px text-right pr-100px c-#fff my-50px cursor-pointer">战略</div>
            <div v-show="!showLiangdian"
                 @click="showLiangdian=!showLiangdian"
                 class="bg-tit2 w-400px h-200px leading-220px text-right pr-100px c-#fff my-50px cursor-pointer">亮点</div>
            <div v-show="!showJixiao"
                 @click="showJixiao=!showJixiao"
                 class="bg-tit2 w-400px h-200px leading-220px text-right pr-100px c-#fff my-50px cursor-pointer">绩效</div>
            <div v-show="!showJindu"
                 @click="showJindu=!showJindu"
                 class="bg-tit2 w-400px h-200px leading-220px text-right pr-100px c-#fff my-50px cursor-pointer">进度</div>
        </div>
        <div v-show="showZhanlue"
             class="absolute top-300px left-200px w-1800px">
            <div class="c-#fff text-80px lh-140px bg-title px-150px flex">
                国家战略布局
                <div class="cursor-pointer ml-auto" @click="showZhanlue = false">
                    <n-button strong secondary type="warning" size="tiny" class="rounded-full"> &#10005; </n-button>
                </div>
            </div>
            <div class="h-900px bg-box1 ">
                <vue3-seamless-scroll
                    :hover="true"
                    :openWatch="true"
                    :step="0.5"
                    :singleHeight="5"
                    :list="list"
                    class="scroll px-50px my-30px">
                    <div v-for="(item, index) in list"
                         :key="index"
                         class=" flex w-100% lh-120px c-#fff text-60px" >
                        <div>{{ index + 1}}</div>
                        <div>{{item.title}}</div>
                    </div>
                </vue3-seamless-scroll>
            </div>
        </div>
        <div v-show="showJixiao"
             class="absolute top-300px left-2100px w-1800px">
            <div class="c-#fff text-80px lh-140px bg-title px-150px flex">
                项目总体绩效目标
                <div class="cursor-pointer ml-auto" @click="showJixiao = false">
                    <n-button strong secondary type="warning" size="tiny" class="rounded-full"> &#10005; </n-button>
                </div>
            </div>
            <div class="h-900px flex flex-wrap bg-box1">
                <div v-for="item in goalList"
                     class="w-25% my-20px px-20px border-box">
                    <div class="c-#fff text-60px text-center lh-80px">{{ item.name }}</div>
                    <div class="h-250px ">
                        <goal-module :value="item.percent" />
                    </div>
                    <div class="c-#fff text-60px text-center lh-80px">{{ item.total }}{{item.unit}}</div>
                </div>
            </div>

        </div>
        <div v-show="showLiangdian"
             class="absolute top-1400px left-200px w-1800px">
            <div class="c-#fff text-80px lh-140px bg-title px-150px flex">
                项目建设亮点
                <div class="cursor-pointer ml-auto" @click="showLiangdian = false">
                    <n-button strong secondary type="warning" size="tiny" class="rounded-full"> &#10005; </n-button>
                </div>
            </div>
            <div class="h-1000px bg-box1 ">
                <bright-module />
            </div>
        </div>
        <div v-show="showJindu"
             class="absolute top-1400px left-2100px w-1800px">
            <div class="c-#fff text-80px lh-140px bg-title px-150px flex">
                各区县进度
                <div class="cursor-pointer ml-auto" @click="showJindu = false">
                    <n-button strong secondary type="warning" size="tiny" class="rounded-full"> &#10005; </n-button>
                </div>
            </div>
            <div class="w-100% h-1000px bg-box1">
                <schedule-module />
            </div>
        </div>
        <!--        指标end-->

        <!--        右侧图片列表-->
        <div
            v-if="showImg"
            class="absolute top-300px right-2200px w-1900px">
            <div class="ol-popup pt-120px px-100px">
                <div @click="onCloser" class="ol-popup-closer">❌</div>
                <div v-if="f.ZXMMC" class="font-bold text-70px flex py-40px" style="border-bottom: 1px solid #eee;">
                    <div class="word-between w-370px mr-50px leading-120px">项目名称</div>
                    <div class="flex-1 ml-1 leading-120px">{{f.ZXMMC}}</div>
                </div>
                <div v-if="f.SHENG" class="text-70px flex py-40px" style="border-bottom: 1px solid #999;">
                    <div class="word-between w-370px mr-50px">地区</div>
                    <div class="flex-1 ml-1 leading-120px">{{f.SHENG}}{{f.SHI}}{{f.XIAN}}</div>
                </div>
                <div v-if="f.KSWZ" class="text-70px flex py-40px" style="border-bottom: 1px solid #999;">
                    <div class="word-between w-370px mr-50px">地址</div>
                    <div class="flex-1 ml-1 leading-120px">{{f.KSWZ}}</div>
                </div>
                <div v-if="f.Shape_Ar_1" class="text-70px flex py-40px" style="border-bottom: 1px solid #999;">
                    <div class="word-between w-370px mr-50px">面积</div>
                    <div class="flex-1 ml-1 leading-120px">{{Number(f.Shape_Ar_1).toFixed(2)}}平米</div>
                </div>
                <div v-if="f.Shape_Le_1" class="text-70px flex py-40px" style="border-bottom: 1px solid #999;">
                    <div class="word-between w-370px mr-50px">周长</div>
                    <div class="flex-1 ml-1 leading-120px">{{f.Shape_Le_1}}米</div>
                </div>
                <div v-if="f.HCDW" class="text-70px flex py-40px" style="border-bottom: 1px solid #999;">
                    <div class="word-between w-370px mr-50px">主管单位</div>
                    <div class="flex-1 ml-1 leading-120px">{{f.HCDW}}</div>
                </div>
                <div v-if="f.HCRY" class="text-70px flex py-40px" style="border-bottom: 1px solid #999;">
                    <div class="word-between w-370px mr-50px">录入人员</div>
                    <div class="flex-1 ml-1 leading-120px">{{f.HCRY}}</div>
                </div>
                <div v-if="f.BZ_1" class="text-70px flex py-40px">
                    <div class="word-between w-370px mr-50px">备注</div>
                    <div class="flex-1 ml-1 leading-120px">{{f.BZ_1}}</div>
                </div>
            </div>
        </div>
        <div v-if="showImg"
             class="absolute right-100px top-300px w-2000px h-2000px ">
            <n-carousel
                effect="card"
                prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
                next-slide-style="transform: translateX(50%) translateZ(-800px);"
                direction="horizontal"
                dot-placement="top"
                dot-type="dot"
                :show-arrow="false"
                draggable
                keyboard
                step="1"
                :class-option="classOption"
                @onChange="onChange"
            >
                <n-carousel-item style="width: 100%"
                                 v-for="(item,index) in historyList">
                    <n-image
                        width="100%"
                        object-fit="cover"
                        :src="'/test/' + (index+ 1) +'.png'"
                    />
                    <div
                        style="background-color: rgba(0, 0, 0, 0.5)"
                        class="absolute left-0 right-0 bottom-0 h-300px leading-300px text-100px c-#fff text-center font-italic">
                        {{ item.date }}
                    </div>
                </n-carousel-item>
            </n-carousel>
        </div>
    </div>
</template>

<style scoped lang="scss">
#wrap{
    position: relative;
    width: var(--baseWidth);
    height: var(--baseHeight);
    box-sizing: border-box;
}

/* 放大按钮样式 */
:deep(.ol-zoom-in) {
    position: absolute;
    top: 2350px;
    left: 11200px;
    background-color: rgba(255, 255, 255, 0.5); /* 背景色，可选 */
    border: none; /* 无边框 */
    color: #fff; /* 白色文字 */
    font-size: 140px; /* 字体大小 */
    width: 150px; /* 宽度 */
    height: 150px; /* 高度 */
    line-height: 150px; /* 行高，使文字垂直居中 */
    text-align: center; /* 文字居中 */
    cursor: pointer; /* 鼠标悬停时变为手形 */
}

/* 缩小按钮样式 */
:deep(.ol-zoom-out) {
    position: absolute;
    top: 2350px;
    left: 11000px;
    background-color: rgba(255, 255, 255, 0.5); /* 背景色，可选 */
    border: none; /* 无边框 */
    color: #fff; /* 白色文字 */
    font-size: 140px; /* 字体大小 */
    width: 150px; /* 宽度 */
    height: 150px; /* 高度 */
    line-height: 150px; /* 行高，使文字垂直居中 */
    text-align: center; /* 文字居中 */
    cursor: pointer; /* 鼠标悬停时变为手形 */
}
// 弹窗样式
.ol-popup {
    background: linear-gradient(0deg, rgb(12, 50, 96), rgba(38, 110, 204, 0.7));
    border-radius: 20px;
    color: white;
    height: 2000px;
}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 50px;
    right: 50px;
    cursor: pointer;
    color: lightpink;
    z-index: 1;
    font-size: 50px;
}

.scroll {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.bg-title{
    background: url("@/assets/images/icon-tit3.png") no-repeat left/cover;
}
.bg-box1{
    background: rgb(0, 0, 0, 0.2);
    border-radius: 30px;
    overflow: hidden;
    box-sizing: border-box;
}
.word-between{
    text-align-last: justify;
}
.bg-tit2{
    background: url("@/assets/images/icon-tit2.png") no-repeat right/cover;
    transition: all .5s;
    transform: translateX(-100px);
    &:hover{
        transform: translateX(0px);
    }
}
.n-auto-complete{
    height: 100%;
}
:deep(.n-input .n-input__input-el) {
    height: 100%;
    line-height: 1;
    font-size: 70px;
}
:deep(.n-input .n-input__placeholder span){
    font-size: 70px;
}
</style>
